<template>
  <el-dialog
    :title="pageType===0?'充值卡生成':'充值卡查看'"
    :visible.sync="dialogVisible"
    width="50%"
    destroy-on-close
    append-to-body
    custom-class="k-dilaog"
    @closed="closedEvent">
    <el-form ref="form" :model="form" label-width="120px">
      <el-form-item label="充值卡点数" required>
        <el-input v-model="form.points" placeholder="请输入单张充值卡点数"></el-input>
        <div class="pointBtnView">
          <el-button v-for="item in option" :key="item" size="mini" @click="clickPointBtn(item)">{{ item }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="充值卡数量" required>
        <el-input v-model="form.numberOfCard" placeholder="请输入需要的充值卡数量"></el-input>
      </el-form-item>
      <el-form-item label="有效期" required>
        <el-input v-model="form.effectiveDays" placeholder="请输入充值卡有效时长（天）"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
     <el-button @click="dialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="clickSureBtn" :loading="loading">确认生成</el-button>
    </span>
  </el-dialog>
</template>

<script>
import request from '@/utils/request';

export default {
  name:"rechargeCardDialog",
  data(){
    return{
      dialogVisible:false,
      loading:false,
      option:[],
      form:{
        points:null,
        numberOfCard:null,
        effectiveDays:null,
      },
      callBack:null,
      pageType:0,//0充值卡生成1充值卡查看
      id:null,
    }
  },
  methods:{
    openDiaolog(pageType,id,block){
      this.pageType = pageType;
      this.id = id;
      this.callBack = block;
      this.dialogVisible = true;
      if (pageType === 1){//查看
        this.requestDataDetail();
      }
      this.requestDataCurrent();
    },
    clickPointBtn(val){
      this.form.points = val;
    },
    clickSureBtn(){
      if (this.pageType === 0){//新增
        if (!this.form.points){
          this.$message.error("请输入充值卡点数");
          return
        }
        if (!this.form.numberOfCard){
          this.$message.error("充值卡数量");
          return
        }
        if (!this.form.effectiveDays){
          this.$message.error("请输入有效期");
          return
        }
        this.requestDataAdd();
      }else {
        this.dialogVisible = false;
      }
    },
    closedEvent(){
      this.form = {};
    },
    //网络-详情
    requestDataDetail(){
      request({
        url:`/notice_info/${this.id}`,
        method:'get',
        params: {}
      }).then(response =>{
        this.form = response.data;
      })
    },
    //网络-新增
    requestDataAdd(){
      this.loading = true;
      request({
        url:`/card_info/save_batch`,
        method:'post',
        data: this.form,
      }).then(response =>{
        this.$message.success(response.msg);
        this.callBack();
        this.dialogVisible = false;
      }).finally(()=>{
        this.loading = false;
      })
    },
    //网络-点数配置列表
    requestDataCurrent(){
      request({
        url:`/point_config/current`,
        method:'get',
        params: {  },
      }).then(response =>{
        this.option = response.rows;
      })
    },
  }
}

</script>

<style scoped>
.pointBtnView{
  display: flex;
  margin-top: 8px;
}

</style>
